<template>
  <div>
    <el-dialog v-model="dialogVisible" width="80%" align-center :show-close="false" @close="handleClose" draggable
      destroy-on-close>
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>{{ title }}</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close">
            <CircleCloseFilled color="#fff" />
          </el-icon>
        </div>
      </template>

      <div class="bg-white mt-[10px]">
        <div class="p-[10px]">
          <el-form :model="incomeForm" :rules="rules" label-width="130px" ref="incomeFormRef">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="对冲号" prop="cwDch">
                  <el-input v-model="incomeForm.cwDch" style="width: 90%" clearable>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来款类型" prop="incomeType">
                  <el-radio-group v-model="incomeForm.incomeType">
                    <el-radio v-for="item in incomeTypeList" :key="item.code" :value="item.code" size="large">{{
                      item.name }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来款单位" prop="incomeUnit">
                  <el-input v-model="incomeForm.incomeUnit" style="width: 90%" clearable>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来款日期" prop="incomeDate">
                  <el-date-picker v-model="incomeForm.incomeDate" type="date" value-format="YYYY-MM-DD"
                    :clearable="false" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="来款金额" prop="feeValue">
                  <el-input clearable style="width: 50%" @input="e =>checkFee(e)" v-model="incomeForm.feeValue">
                    <template #append>万元</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="摘要" prop="note">
                  <el-input type="textarea" clearable style="width: 80%" v-model="incomeForm.note">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { addincome,editincome } from "@/api/fee/rz/yhdk/index.js";
import { assignObj } from "@/utils/main";
import { ElMessage } from "element-plus";
import { isMoney,FloatDiv,FloatMul } from "@/utils/pub";
import useCommonFetch from "@/hooks/useCommonFetch";
import dayjs from "dayjs";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const incomeFormRef = ref(null);
const operateId = ref(null);
const incomeTypeList = useCommonFetch("来款类型");
const title = computed(() => {
  return operateId.value ? "银行到款编辑" : "银行到款新增";
});
const incomeForm = reactive({
  cwDch: "",
  incomeDate: "",
  incomeType:"direct",
  incomeUnit:"",
  note:"",
  feeValue:null,
});
//验证规则
const rules = reactive({
  cwDch: [
    {
      required: true,
      message: "对冲号必填",
    },
  ],
  incomeUnit: [
    {
      required: true,
      message: "来款单位必填",
    },
  ],
  incomeDate: [
    {
      required: true,
      message: "来款日期必填",
    },
  ],
  feeValue: [
    {
      required: true,
      message: "来款金额必填",
    },
  ],
  note: [
    {
      required: true,
      message: "摘要必填",
    },
  ],
});

//来款金额判断
const checkFee = (value) => {
  if (value !== null) { // 
    value = value.toString().replace(/[^\d.]/g, '').replace(/(\..*)\./g, '$1');
    incomeForm.feeValue= value;
  }
  if (value > 100000) {
    ElMessage.error("单笔金额不能超过10亿");
    incomeForm.feeValue = null;
    return false;
  }

  if (!isMoney(value)) {
    ElMessage.error("金额小数位不能超过6位，只能精确到分");
    incomeForm.feeValue = null;
    return false;
  }
};

// 新增
const add = async () => {
  operateId.value = null;
  dialogVisible.value = true;
};

// 编辑
const edit = async (row) => {
  operateId.value = row.id;
  dialogVisible.value = true;
  assignObj(incomeForm, row);
  incomeForm.feeValue = FloatDiv(incomeForm.feeValue,10000);
};
defineExpose({ add,edit });

//关闭弹窗
const handleClose = () => {
  //重置表单数据
  incomeFormRef.value.resetFields();
  incomeForm.cwDch ="";
  incomeForm.incomeDate= "";
  incomeForm.incomeType="";
  incomeForm.incomeUnit="";
  incomeForm.note="";
  incomeForm.feeValue=null;
};
const emit = defineEmits(["save-success"]);
//点击保存
const save = () => {
  try {
    incomeFormRef.value?.validate(async (valid) => {
      if (valid) {
        let res;
        let params = {...incomeForm};
        params.feeValue = FloatMul(params.feeValue,10000); // 金额数据库存万元
        params.incomeDate = new Date(params.incomeDate).getTime();
        proxy.$modal.loading("请稍候...");
        if(operateId.value) {   
            params.id = operateId.value;       
          res = await editincome(params);
        } else {
          res = await addincome(params);
        }
        proxy.$modal.closeLoading();
        if (res.code === 200) {
          ElMessage({
            message: "操作成功！",
            type: "success",
          });
          dialogVisible.value = false;
          emit("save-success");
        }
      }
    });
  } catch (error) {
    proxy.$modal.closeLoading();
    console.log(error);
  }
};
</script>

<style scoped lang="scss">
@import url("@/views/fee/index.scss");
</style>